<template>
  <div class="video-container">

    <audio ref="videoPlayer" style="width: 100%;" controls>
    </audio>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import Plyr from 'plyr';
import 'plyr/dist/plyr.css';
import Cupk2Request from '@/service/remoteRequests/Cupk2Request';


const videoPlayer = ref<HTMLVideoElement | null>(null);


const props = defineProps({
  extendFileId: {
    type: String,
    required: true
  }
});

let player: Plyr | null = null;

onMounted(() => {
  if (videoPlayer.value) {

    player = new Plyr(videoPlayer.value);

    const source = document.createElement('source');
    source.setAttribute('src', Cupk2Request.getFullPath('api/exfiles/download/media/' + props.extendFileId + '.mp3'));
    source.setAttribute('type', 'audio/mp3');
    if (videoPlayer.value) {
      videoPlayer.value.appendChild(source);
      videoPlayer.value.load();
    }
  }
});

onUnmounted(() => {
  if (player) {
    player.destroy();
  }
});
</script>

<style scoped>
/* 样式可以根据需要添加 */
.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
  height: 100%;
  padding: 20px;
}

.video-container audio {
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 1em;
}
</style>
